<%@ page contentType="text/html;charset=UTF-8" language="java" import="entity.Category,entity.User" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script src="../js/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css" scope>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<style>
    *{
        margin:0px;
        padding:0px;
    }
    #content{
        background:white;
        width:100%;
    }
    a{
        text-decoration: none;
    }
    #content header{
        background:gainsboro;
        height:30px;
    }
    #content li{
        list-style:none;
        line-height: 30px;
        text-align: center;
        margin-left:20px;
        font-size:13px;
        color:gray;
    }
    #content li>a{
        color:gray;
    }
    #content ul{
        display: flex;
        height:30px;
        float:right;
        margin-right:150px;
    }
    #content .dropdown-toggle{
        display: inline-block;
        width:100px;
        height:30px;
    }
    #content .category{
        font-size:10px;
        width:80px;
        height:25px;
    }
    #content #search{
        border:2px solid red;
        width:508px;
    }
    .btn-danger{
        background:red;
        width:100px;
        border-radius: 0px;
        border:0px;
        outline: none;
        margin:0px;
    }
    #content .btn-default{
        width:150px;
        height:40px;
        margin-top:-20px;
    }
    #content .btn-default .badge {
        margin-top:-10px;
        margin-left:-7px;
        background:red;
    }
    #content article{
        display: flex;
        height:100px;
        padding-left:10%;
    }
    #content article div{
        margin-top:20px;
    }
    #content .dropdown-menu{
        margin-top:0px;
    }
</style>

<div id="content">
    <header>
        <ul>
            <c:if test="${sessionScope.user == null}">
                <li>您好，<a href="${pageContext.request.contextPath}/page/login">请登录</a>
                    <a href="${pageContext.request.contextPath}/page/register" style="color:red;">免费注册</a></li>
            </c:if>
            <c:if test="${sessionScope.user != null}">
                <li style="font-weight: bold;">${sessionScope.user.getNickName()} <a href="/service/user_quit">退出</a></li>
            </c:if>
            <li><a href="">我的订单</a></li>
            <li><a href="/service/wish_list">我的收藏</a></li>
            <li><a href="">京东会员</a></li>
            <li><a href="">企业采购</a></li>
            <li><a href="">客户服务</a></li>
            <li><a href="">手机京东</a></li>
        </ul>
    </header>

    <article>
        <a href="/">
            <img src="../static/image/similarLogo.png" width="150px" height="50px;" style="margin-top:20px;">
        </a>
            <div style="display: flex;margin-left:30px;margin-top:30px;">
                <div style="width:100px;"> <span style="text-align: center;font-size: 20px;color: gray;">JOY寻宝</span> </div>
                <div class="dropdown" >
                    <span class="dropdown-toggle category" data-toggle="dropdown" style="margin-top:10px;">
                        全部分类 <i class="glyphicon glyphicon-chevron-down"></i>
                    </span>
                    <div class="dropdown-menu">
                            <c:forEach items="${sessionScope.categoryList}" var="item">
                                <div style="text-align: center;">
                                    <a href="/service/category_details?pageIndex=1&categoryId=${item.getCategoryId()}">${item.getCategoryName()}</a>
                                </div>
                            </c:forEach>
                    </div>
                </div>
            </div>
            <div style="margin-left:70px;">
                <div id="search">
                    <input type="text" style="width:400px;height:30px;border:none;outline: none;font-size:13px;color:gray;" >
                    <button type="button" class="btn btn-danger" >搜 索</button>
                </div>
            </div>
            <div id="cart" style="margin-left:50px;">
                <div class="btn-group">
                    <div class="dropdown">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <a href="#" style="color:red;">我的购物车</a>
                            <i class="glyphicon glyphicon-shopping-cart"></i>
                            <span class="badge">10</span>
                        </button>
                        <div class="dropdown-menu">
                            <ul>
                                <li>adfasd</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </article>
</div>
